<template>
  <div class="shop-cart">
    <div
      v-for="item in getCartPro"
      :key="item.brandId"
      class="prod-item flex a-center"
    >
      <div class="pro-top flex a-center">
        <img :src="item.img" />
      </div>
      <div class="pro-bot flex j-center flex-col a-center">
        <div class="name">{{ item.name }}</div>
        <div class="add-num">
          <button @click="reduceNum(item.brandId)">-</button>
          {{ item.num }}
          <button @click="addNum(item.brandId)">+</button>
        </div>
        <div class="price">￥{{ item.price }}</div>
      </div>
    </div>

    <div class="count-panel flex a-center j-between">
      <div>
        总计:
        <span class="price"> ￥{{ $store.getters.totalProd }}</span>
      </div>
      <mt-button type="danger"
        >去结算({{ $store.getters.countNum }}件)</mt-button
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "ShopCart",
  created() {
    console.log(this.$store, this.getCartPro);
  },
  methods: {
    addNum(id) {
      this.$store.commit("addNum", id);
      this.$store.commit("saveCart");
    },
    reduceNum(id) {
      this.$store.commit("reduceNum", id);
      this.$store.commit("saveCart");
    },
  },
  computed: {
    getCartPro() {
      return this.$store.state.cart.prodArr;
    },
  },
};
</script>

<style scoped>
.shop-cart {
  margin: 10px;
  margin-bottom: 90px;
}
.prod-item {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
  padding: 6px;
  margin-bottom: 10px;
}
.pro-top >>> img {
  width: 120px;
  height: 120px;
  object-fit: cover;
}
.pro-bot {
  margin-left: 10px;
}
.add-num {
  font-size: 20px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.name {
  font-size: 14px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.price {
  color: var(--red);
  font-size: 18px;
}

.count-panel {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(var(--tabbar-height) + 20px);
  background-color: rgba(245, 245, 245, 0.6);
  padding: 5px 10px;
  border-radius: 6px;
  box-shadow: 0 0 16px rgba(56, 176, 255, 0.5);
}
</style>